<template>
  <div class="tools-page">
    <div class="tools-nav" v-if="!hasChildRoute">
      <div class="container">
        <h1>在线工具</h1>
        <div class="tools-grid">
          <router-link 
            v-for="tool in tools" 
            :key="tool.path"
            :to="{ path: `/tools/${tool.path}` }"
            class="tool-card"
          >
            <div class="tool-icon">
              <i :class="tool.icon"></i>
            </div>
            <h3>{{ tool.name }}</h3>
            <p>{{ tool.description }}</p>
          </router-link>
        </div>
      </div>
    </div>

    <router-view v-if="hasChildRoute"></router-view>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()

const hasChildRoute = computed(() => {
  return route.path !== '/tools'
})

const tools = ref([
  {
    name: 'Drools规则生成器',
    path: 'drools',
    icon: 'fas fa-cogs',
    description: '在线生成 Drools 规则文件'
  },
  {
    name: '时间戳转换',
    path: 'timestamp',
    icon: 'fas fa-clock',
    description: '时间戳与日期格式互转'
  },
  {
    name: '二维码生成',
    path: 'qrcode',
    icon: 'fas fa-qrcode',
    description: '在线生成二维码'
  },
  {
    name: 'WebSocket测试',
    path: 'websocket',
    icon: 'fas fa-plug',
    description: 'WebSocket 连接测试工具'
  },
  {
    name: 'JSON工具',
    path: 'json',
    icon: 'fas fa-code',
    description: 'JSON格式化、压缩、转换工具'
  },
  {
    name: '加解密工具',
    path: 'crypto',
    icon: 'fas fa-lock',
    description: '常用加解密算法工具集合'
  }
])
</script>

<style scoped lang="scss">
.tools-page {
  min-height: calc(100vh - 60px);
  background: #f5f7fa;

  .tools-nav {
    padding: 40px 0;

    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;

      h1 {
        margin-bottom: 40px;
        color: var(--text-color);
        font-size: 2rem;
      }
    }

    .tools-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 24px;
    }

    .tool-card {
      background: white;
      border-radius: 16px;
      padding: 24px;
      text-decoration: none;
      color: var(--text-color);
      transition: all 0.3s ease;
      border: 2px solid transparent;
      
      &:hover {
        transform: translateY(-4px);
        border-color: var(--primary-color);
        box-shadow: 0 8px 24px rgba(0,0,0,0.1);
      }

      .tool-icon {
        width: 48px;
        height: 48px;
        background: var(--primary-color);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 16px;

        i {
          color: white;
          font-size: 24px;
        }
      }

      h3 {
        margin-bottom: 8px;
        font-size: 1.2rem;
      }

      p {
        color: #666;
        font-size: 0.9rem;
      }
    }
  }
}
</style> 